<!-- 基础配置 -->
<template>
  <a-card
    style="width: 100%"
    :tab-list="tabListNoTitle"
    :active-tab-key="titleKey"
    @tabChange="(key) => onTabChange(key)"
    :bordered="false"
    class="br-10"
  >
    <div v-if="titleKey === 'baseInfo'">
      <BaseInfo />
    </div>
    <template v-else-if="titleKey === 'profit'">
      <Profit />
    </template>
    <div v-else-if="titleKey === 'message'">
      <Message />
    </div>
    <div v-else-if="titleKey === 'agreement'">
      <Agreement type="userAgreement" />
    </div>
    <div v-else-if="titleKey === 'privacyPolicy'">
      <Agreement type="privacyPolicy" />
    </div>
    <div v-else-if="titleKey === 'contactUs'">
      <ContactUs />
    </div>
  </a-card>
</template>

<script>
import BaseInfo from './components/baseInfo'
import Profit from './components/profit'
import Agreement from './components/agreement'
import Message from './components/message'
import ContactUs from './components/contactUs'

export default {
  components: {
    BaseInfo,
    Profit,
    Agreement,
    Message,
    ContactUs,
  },
  data() {
    return {
      tabListNoTitle: [
        {
          key: 'baseInfo',
          tab: '基础信息',
        },
        {
          key: 'profit',
          tab: '技术服务费',
        },
        {
          key: 'agreement',
          tab: '用户协议',
        },
        {
          key: 'privacyPolicy',
          tab: '隐私协议',
        },
        {
          key: 'contactUs',
          tab: '联系我们',
        },
      ],
      titleKey: 'baseInfo',
    }
  },
  computed: {},
  watch: {},
  methods: {
    onTabChange(key) {
      this.titleKey = key
    },
  },
  created() {},
  mounted() {},
}
</script>
<style scoped></style>
